import { useEffect, useMemo, useState, useRef } from "react";
import { FloatButton, Row } from "antd";
import { BarsOutlined } from "@ant-design/icons";
import ReactGridLayout, { WidthProvider } from "react-grid-layout";
import PanelContainer from "./modules/PanelContainer";
import DashboardRow from "./modules/DashboardRow";
import styled from "styled-components";
import { SvgIcon } from "@/components/icon";
const DecoratedReactGridLayout = WidthProvider(ReactGridLayout);
// 外部拖拽 参考：https://github.com/react-grid-layout/react-grid-layout/pull/2072/commits/efda540edfb1408cdc337bf0ceac927d538b8aef#diff-83ab569936bfd4bf0460a4f23653ecbe8bc88509062c95e75c9402218b2b8733

let mouseXY = { "x": null, "y": null };
let DragPos = { "x": null, "y": null, "w": 1, "h": 1, "i": null };

const MixtureIndex = () => {
  const [colNum, setColNum] = useState(24)
  const [droppingItem, setDroppingItem] = useState({
    i: 'new',
    w: 24,
    h: 3,
  })
  const gridLayout = useRef(null)
  const [panels, setPanels] = useState([
    // { gridPos: { w: 24, h: 1, x: 0, y: 0 }, title: '电磁作战系统', id: '0', type: 'DashboardRow' },
    { gridPos: { w: 12, h: 6, x: 0, y: 1 }, title: 'demo', id: '1' },
    { gridPos: { w: 12, h: 6, x: 12, y: 1 }, title: 'demo', id: '2' },
    // { gridPos: { w: 24, h: 1, x: 0, y: 7 }, title: '作战指挥系统', id: '3', type: 'DashboardRow' },
    { gridPos: { w: 8, h: 6, x: 0, y: 8 }, title: 'demo', id: '4' },
    // { gridPos: { w: 8, h: 6, x: 8, y: 8 }, title: '作战序列', id: '5' },
    // { gridPos: { w: 8, h: 6, x: 16, y: 8 }, title: '作战序列', id: '6' },
    // { gridPos: { w: 24, h: 8, x: 0, y: 14 }, title: '作战序列', id: '7' },
  ])
  const [layoutItems, setLayoutItems] = useState([])

  useEffect(() => {
    setLayoutItems(panels.map((option, index) => {
      return { ...option.gridPos, i: option.id }
    }))

  }, [])

  return (<StyleWrap>

    {/* <div
      className="droppable-element"
      draggable={true}
      unselectable="on"
      data-grid={{ w: 24, h: 1, x: 0, y: 0 }}
      // this is a hack for firefox
      // Firefox requires some kind of initialization
      // which we can do by adding this attribute
      // @see https://bugzilla.mozilla.org/show_bug.cgi?id=568313
      onDragStart={e => e.dataTransfer.setData("text/plain", "")}
    >
      Droppable Element (Drag me!)
    </div> */}

    <div id="content">
      <DecoratedReactGridLayout
        ref={gridLayout}
        layout={layoutItems}
        cols={24}
        rowHeight={30}
        margin={[10, 10]}
        isDraggable={true}
        isResizable={true}
        droppingItem={droppingItem}
        isDroppable={true}
        onLayoutChange={(layout) => {
          console.log(layout)
        }}
        resizeHandle={<span className="react-resizable-handle">
          <SvgIcon icon="resizable" />
        </span>}
      >
        {panels.map((option, index) => (
          <div key={option.id} >
            {option.type === 'DashboardRow' ? <DashboardRow panelOption={option}></DashboardRow> :
              <PanelContainer panelOption={option} >
                <div>子应用模块</div>
              </PanelContainer>
            }
          </div>
        ))}
      </DecoratedReactGridLayout>
    </div>

    {/* <Row>
      <Col span={18}>
        <DecoratedReactGridLayout
          layout={layout}
          cols={24}
          rowHeight={30}
          margin={[10, 10]}
          isDraggable={true}
          isResizable={true}
          onLayoutChange={(layout) => {
            console.log(layout)
          }}
          resizeHandle={<span className="react-resizable-handle">
            <SvgIcon icon="resizable" />
          </span>}
        >
          {panels.map((option, index) => (
            <div key={option.id} data-grid={{ ...option.gridPos }}>
              {option.type === 'DashboardRow' ? <DashboardRow panelOption={option}></DashboardRow> :
                <PanelContainer panelOption={option} >
                  <div>子应用模块</div>
                </PanelContainer>
              }
            </div>
          ))}
        </DecoratedReactGridLayout>
      </Col>
      <Col span={6}>
        <div draggable ondragstart={() => { }} style={{ fontSize: '30px' }}>拖我</div>
      </Col>
    </Row> */}


    {/* <FloatButton icon={<BarsOutlined />} type="default" style={{ insetInlineEnd: 20, marginBottom: '200px' }} /> */}
  </StyleWrap>);
}

const StyleWrap = styled.div`
  position: relative;
  .react-grid-item
  {
    /* touch-action: none; */
  }
  .react-grid-item:not(.react-draggable-dragging) {
      transition: all 200ms ease;
      transition-property: transform;
    }


  .react-resizable-handle {
    position: absolute;
    width: 20px;
    height: 20px;
    bottom: 0;
    right: 0;
    background-position: bottom right;
    padding: 0 3px 3px 0;
    background-repeat: no-repeat;
    background-origin: content-box;
    box-sizing: border-box;
    cursor: se-resize;
    transform: none !important;
    font-size: 10px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    color: #fff;
    opacity: .2;
    transition: opacity .3s;
    &:hover{
      opacity: 0.8;
    }
  }


  .droppable-element {
    width: 150px;
    text-align: center;
    background: #fdd;
    border: 1px solid black;
    margin: 10px 0;
    padding: 10px;
}
`

export default MixtureIndex;